<template>
  <div id="app-container">
    <el-tabs v-model="activeName" >
      <el-tab-pane label="团课课程" name="first">
        <!--条件查询表单-->
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-input v-model="leagueQueryVo.name" placeholder="团课名称"/>
          </el-form-item>
          <el-form-item>
            <el-select v-model="leagueQueryVo.coachId" clearable placeholder="团课教练">
              <el-option
                v-for="coach in coachList"
                :key="coach.id"
                :label="coach.name"
                :value="coach.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getList(-1)">查询</el-button>

          <router-link to="/league/add">
            <el-button type="primary">添加团课</el-button>
          </router-link>

        </el-form>

        <!--数据显示列表-->
        <el-table :data="dataList" fit highlight-current-row>
          <el-table-column type="index" label="序号" width="70">
            <template slot-scope="scope">
              {{pageSize * (currentPage - 1) + scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="课程图片" >
            <template slot-scope="scope">
              <div class="pic">
                <img :src="'http://rj0387v46.hn-bkt.clouddn.com/' + scope.row.img"  width="150px">
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="名称" ></el-table-column>
          <el-table-column prop="cname" label="教练" ></el-table-column>
          <el-table-column prop="sort" label="排序" ></el-table-column>
          <el-table-column prop="time" label="时长（分钟）" ></el-table-column>
          <el-table-column prop="book_count" label="可预约人数" ></el-table-column>
          <el-table-column label="操作" width="250">
            <template slot-scope="scope">

              <router-link :to="'/league/edit/' + scope.row.id">
                <el-button size="mini" >修改</el-button>
              </router-link>
              <router-link :to="'/league/card/' + scope.row.id">
                <el-button size="mini" >会员卡</el-button>
              </router-link>
              <el-button size="mini" @click="handleRemove(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1, 2, 3, 4]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>

      </el-tab-pane>
      <el-tab-pane label="团课课表" name="second">
        <!--条件查询表单-->
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-input v-model="timetableQueryVo.name" placeholder="团课名称"/>
          </el-form-item>
          <el-form-item>
            <el-select v-model="timetableQueryVo.coachId" clearable placeholder="团课教练">
              <el-option
                v-for="coach in coachList"
                :key="coach.id"
                :label="coach.name"
                :value="coach.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getTimetableList(-1)">查询</el-button>

            <el-button type="primary" @click="handleTimetableAdd">添加排期</el-button>

        </el-form>

        <!--数据显示列表-->
        <el-table :data="timetableList" fit highlight-current-row>
          <el-table-column type="index" label="序号" width="70">
            <template slot-scope="scope">
              {{pageSize * (currentPage - 1) + scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="name" label="名称" ></el-table-column>
          <el-table-column prop="cname" label="教练" ></el-table-column>
          <el-table-column prop="gname" label="场馆" ></el-table-column>
          <el-table-column prop="start_time" label="开始时间" ></el-table-column>
          <el-table-column prop="end_time" label="结束时间" ></el-table-column>
          <el-table-column prop="book_count" label="可预约人数" ></el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
                <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleToEdit(scope.row)">修改</el-button>
              <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleTimetableRemove(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @size-change="handleSizeChangePro"
          @current-change="handleCurrentChangePro"
          :current-page="currentPagePro"
          :page-sizes="[1, 2, 3, 4]"
          :page-size="pageSizePro"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalPro">
        </el-pagination>

        <!-- Dialog：添加视频表单 -->
        <el-dialog :visible.sync="dialogFormVisible" title="视频维护">
          <el-form :model="timetable" label-width="120px">
            <el-form-item label="开始时间">
              <div class="block">
                <el-date-picker
                  v-model="timetable.startTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  default-time="12:00:00"
                  value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
              </div>
            </el-form-item>
            <el-form-item label="结束时间">
              <div class="block">
                <el-date-picker
                  v-model="timetable.endTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  default-time="12:00:00"
                  value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
              </div>
            </el-form-item>
            <el-form-item label="选择课程">
              <el-select v-model="timetable.leagueId" placeholder="请选择">
                <el-option
                  v-for="league in leagueList"
                  :key="league.id"
                  :label="league.name"
                  :value="league.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleTimetableSubmit">确 定</el-button>
          </div>
        </el-dialog>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import league from "../../api/league";
import timetable from "../../api/timetable";
import coach from "../../api/coach";

export default {
  data(){
    return{
      leagueQueryVo: {},
      currentPage: 1,
      pageSize: 2,
      dataList: [],
      total: 1,
      activeName: 'first',
      timetableQueryVo: {},
      timetableList: [],
      dialogFormVisible: false,
      timetable: {},
      leagueList: [],
      coachList: [],
      pageSizePro: 2,
      totalPro: 1,
      currentPagePro: 1
    }
  },
  created(){
    this.getList()
    this.getTimetableList()
    this.getLeague()
    this.getName()
  },
  methods: {
    // 获取团课数据
    getList(value){
      if(value == -1){
        this.currentPage = 1;
      }
      league.getList(this.currentPage, this.pageSize, this.leagueQueryVo).then(res => {
        this.dataList = res.data.data;
        this.total = res.data.total;
      })
    },
    // 获取教练名称
    getName(){
      coach.getName().then(res => {
        this.coachList = res.data
      })
    },
    getLeague(){
      league.queryAll().then(res => {
        this.leagueList = res.data
      })
    },
    handleSizeChange(size){
      this.pageSize = size;
      this.getList();
    },
    handleCurrentChange(currentPage){
      this.currentPage = currentPage
      this.getList();
    },
    handleSizeChangePro(size){
      this.pageSizePro = size;
      this.getTimetableList();
    },
    handleCurrentChangePro(currentPage){
      this.currentPagePro = currentPage
      this.getTimetableList();
    },
    // 删除团课
    handleRemove(row){
      this.$confirm("是否确定删除？", "提示", {type: "warning"})
        .then(() => {
          // 点击了确定删除
          league.remove(row.id).then(res => {
            this.$message.success(res.message)
            this.getList()
          })
        })
        .catch(() => {
          // 点击取消删除
          this.$message.info("取消删除操作");
        });
    },
    // 获取课程表数据
    getTimetableList(value){
      if(value == -1){
        this.currentPage = 1;
      }
      timetable.getList(this.currentPagePro, this.pageSizePro, this.timetableQueryVo).then(res => {
        this.timetableList = res.data.data
        this.totalPro = res.data.total
      })
    },
    // 显示添加窗口
    handleTimetableAdd(){
      this.timetable = {};
      this.dialogFormVisible = true
    },
    // 显示编辑窗口
    handleToEdit(row){
      timetable.getById(row.id).then(res => {
        this.timetable = res.data
        this.dialogFormVisible = true
      })
    },
    // 添加或编辑排期
    handleTimetableSubmit(){
      if(this.timetable && this.timetable.id){
        timetable.edit(this.timetable).then(res => {
          this.$message.success(res.message);
          this.dialogFormVisible = false;
          this.getTimetableList()
        })
      }else{
        timetable.add(this.timetable).then(res => {
          this.$message.success(res.message);
          this.dialogFormVisible = false;
          this.getTimetableList()
        })
      }
    },
    // 删除排期
    handleTimetableRemove(row){
      this.$confirm("是否确定删除？", "提示", {type: "warning"})
        .then(() => {
          // 点击了确定删除
          timetable.remove(row.id).then(res => {
            this.$message.success(res.message)
            this.getTimetableList()
          })
        })
        .catch(() => {
          // 点击取消删除
          this.$message.info("取消删除操作");
        });
    }
  }
}
</script>
